import { FormControl, IconButton, Input } from "@mui/material";
import { open } from "@tauri-apps/plugin-dialog";
import { UploadFile } from "@mui/icons-material";
export default function FileSelectInput(props: {
  label?: string;
  value?: string;
  onChange?: (value: string) => void;
}) {
  const { label, value, onChange } = props;
  const select = async () => {
    // Open a dialog
    const file = await open({
      multiple: false,
      directory: false
    });

    if (onChange) {
      onChange(file === null ? "" : file);
    }
  };

  return (
    <FormControl
      size="small"
      variant="standard"
      sx={{ display: "flex", flexDirection: "row", gap: "20px", width: "100%" }}
    >
      <Input disabled value={value} sx={{ width: "300px" }} placeholder={label} />
      <IconButton size="small" onClick={select}>
        <UploadFile />
      </IconButton>
    </FormControl>
  );
}
